<template>
    <page-container>
        <view slot="center">
            <view class="live-home" v-if="wx_options != null">
                <!-- 顶部、 -->
                <block>
                    <view class="live-top" :style="{ top: StatusBar + 'px' }">
                        <DownloadApp></DownloadApp>
                        <view class="live-top-content df-cen-rl">
                            <view class="df-ai-cen anchor-info">
                                <!-- headimg -->
                                <view class="cu-avatar round" :style="{ backgroundImage: 'url(' + $util.img(wx_options.headimg) + ')' }"></view>
                                <view class="anchor-user df-col-cen">
                                    <view class="anchor-user-name">{{ wx_options.nickname }}</view>
                                    <view style="opacity: 0.5;font-size:24rpx;color:#fff">人气{{ wx_options.views }}</view>
                                </view>
                                <view>
                                    <button class="cu-btn round sm bg-orange-red shadow" v-if="!wx_options.follow" @click="subscribeBtn">关注</button>
                                    <button class="cu-btn round sm line-red shadow" v-if="wx_options.follow" @click="subscribeBtn">已关注</button>
                                </view>
                            </view>
                            <view class="live-top-right df-ai-cen">
                                <!-- <view class=" cu-avatar-group ">
							<view class="cu-avatar round " style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view>
							<view class="cu-avatar round " style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view>
							<view class="cu-avatar round " style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view>
						</view>
						<view class="live-num mr-10">{{ wx_options.views }}</view> -->
                                <view class="close-icon df-cen"><text :class="pagesLen == 1 ? 'cuIcon-home': 'cuIcon-close'" @click="closeBtn"></text></view>
                            </view>
                        </view>
                    </view>
                </block>
                <block>
                    <!-- baseImg +  -->
                    <video :src="replay_url" controls :autoplay="true" class="replay-video" id="replayVideo" object-fit="cover" x5-video-player-type="h5-page" :poster="posterUrl"></video>
                    <view class="live-bottom-box df-ai-cen">
                        <view class="live-goods" @click="goodsBtn">
                            <image :src="staticImgUrl + 'live/goods-icon.png'" mode="" />
                            <view class="live-goods-num">{{ wx_options.goods.length }}</view>
                        </view>
                        <!-- @click="ceshi" -->
                        <view class="live-bottom-val" style="opacity: 0;">
                            <!-- <input placeholder="说点什么吧..." placeholder-style="color:#ffffff" @confirm="valConfim" /> -->
                            <view>说点什么吧</view>
                        </view>
                        <!-- toolType = true -->
                        <view class="live-icon-item" @click="toolBtn">
                            <image :src="staticImgUrl + 'live/live-menu.png'" mode="" />
                        </view>
                        <view class="live-icon-item" @click="ceshi">
                            <image :src="staticImgUrl + 'live/gifv.png'" mode="" />
                        </view>
                        <view class="live-icon-item">
                            <likeButton :throttle="50" :large="false" :src="staticImgUrl + 'live/love.png'" :width="72" :height="72"></likeButton>
                        </view>
                    </view>
                </block>
                <!-- h5遮罩层 -->
                <view class="live-mask" v-if="maskType"></view>
                <!-- 工具栏下拉框 -->
                <!-- 		<bottom-popup :showType="toolType" :headerType="false" bgColor="#fffff" @cancel="toolType = false"></bottom-popup> -->
                <!-- 工具栏下拉框 -->
                <bottom-popup :showType="toolType" :headerType="false" bgColor="#252524" @cancel="toolType = false">
                    <view slot="content">
                        <view class="tool-title">直播工具</view>
                        <view class="tool-content df-ai-cen">
                            <!-- #ifdef MP-WEIXIN -->
                            <button class="df-col-cen toolbar-share" @click="shareBtn">
                                <view class="tool-content-icon">
                                    <image :src="staticImgUrl + 'live/live-share.png'" mode="" />
                                </view>
                                <view class="tool-content-text">分享</view>
                            </button>
                            <!-- #endif -->
                            <!-- #ifdef H5 -->
                            <view class="df-col-cen tool-content-item" @click="shareBtn">
                                <view class="tool-content-icon">
                                    <image :src="staticImgUrl + 'live/live-share.png'" mode="" />
                                </view>
                                <view class="tool-content-text">分享</view>
                            </view>
                            <!-- #endif -->
                            <view class="df-col-cen tool-content-item" @click="ceshi">
                                <view class="tool-content-icon">
                                    <image :src="staticImgUrl + 'live/live-jubao.png'" mode="" />
                                </view>
                                <view class="tool-content-text">举报</view>
                            </view>
                        </view>
                    </view>
                </bottom-popup>
                <!-- 商品的下拉框 -->
                <block v-if="wx_options != null">
                    <bottom-popup :showType="goodsType" :headerType="false" bgColor="#222222" @cancel="goodsType = false">
                        <view class="live-goods-box" slot="content">
                            <view class="live-goods-header">全部商品</view>
                            <scroll-view scroll-y="true" class="goods-scrool">
                                <!-- {{ wx_options.goods }} -->
                                <view class="goods-row df margin-bottom" v-for="(item, inx) in wx_options.goods" :key="inx">
                                    <view class="goods-row-image pr">
                                        <view class="pa goods-index bg-orange-red df-cen">{{ inx + 1 }}</view>
                                        <image :src="$util.img(item.sku_image)" mode="aspectFill" style="width: 100%;height: 100%;"></image>
                                    </view>
                                    <view class="goods-row-info df-col">
                                        <view class="goods-row-title">{{ item.sku_name }}</view>
                                        <view class="df-cen-rl">
                                            <view>
                                                <view class="goods-row-marketprice">￥{{ item.market_price }}</view>
                                                <view class="goods-row-price">￥{{ item.price }}</view>
                                            </view>
                                            <button class="cu-btn round bg-orange-red shadow" @click="jumpGoods(item)">去购买</button>
                                        </view>
                                    </view>
                                </view>
                            </scroll-view>
                        </view>
                    </bottom-popup>
                </block>
                <view class="pf-100 live-error df-cen" v-if="liveErrorType">主播端网络过慢，请刷新试试</view>
                <!-- #ifdef H5 -->
                <block v-if="!isNativeApp() && shareContent != null">
                    <wx-config :shareContent="shareContent"></wx-config>
                </block>
                <!-- #endif -->
                <block>
                    <block v-if="liveGiftList.length > 0">
                        <live-gift :giftShow="giftType" :giftList="liveGiftList" @giftCancelCall="giftCancel" @giftCall="giftCallFn"></live-gift>
                    </block>
                    <!-- <live-gift :giftShow="true" ></live-gift> -->
                </block>
                <block v-if="showFenXiang==true">
                    <fenxiang @closeFx="closeFx"></fenxiang>
                </block>
            </view>
        </view>
    </page-container>
</template>

<script>
import {
	mapGetters,
	mapMutations
} from 'vuex'
import fenxiang from '@/livePages/components/fenxiang.vue'
import liveGift from '@/livePages/components/live-gift.vue'
import likeButton from '@/livePages/components/like-button.vue'
// #ifdef H5
import wxConfig from '@/common/components/global/wx-config.vue'
// #endif
import DownloadApp from '@/common/components/global/download-app.vue'
export default {
	name: 'Live',
	components: {
		fenxiang,
		liveGift,
		DownloadApp,
		likeButton,
		// #ifdef H5
		wxConfig
		// #endif
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	onHide() {
		this.showFenXiang = false
	},
	data() {
		return {
			showFenXiang: false,
			// #ifdef MP-WEIXIN
			StatusBar: this.StatusBar + 12,
			// #endif
			// #ifdef H5
			StatusBar: this.StatusBar,
			// #endif
			wx_options: null,
			maskType: false,
			toolType: false,
			goodsType: false,
			liveErrorType: false,
			shareContent: null,
			videoContext: null,
			replay_url: null,
			posterUrl: null,
			liveGiftList: [],
			giftType: false,
			gfitThrottle: false,
			pagesLen: 0 // 页面栈数量
		}
	},
	mounted() {
		this.pagesLen = getCurrentPages().length
	},
	onShow() {
		this.$request.getLiveGifts().then(res => {
			this.liveGiftList = res
			console.log('礼物列表', this.liveGiftList)
		})
		// console.log(this.baseImg)
		if (this.videoContext) {
			this.videoContext.play()
			return false
		}
		let optiops = this.$util.queryObj()
		this.$request.getLiveDetail({
			id: optiops.live_id
		}).then(res => {
			console.log('getLiveDetail', res)

			this.wx_options = res.data
			let hs = res.data.replay_url.indexOf('http')
			this.posterUrl = res.data.thumb
			if (hs == -1) {
				this.replay_url = 'https://www.kanfoshan.cn/' + res.data.replay_url
			} else {
				let replay_url_New = res.data.replay_url.replace('http:', 'https:')
				this.replay_url = replay_url_New
			}
			console.log('replay_url=>', this.replay_url)
			// console.log("this.replay_url=>",this.replay_url)
			this.videoContext = uni.createVideoContext('replayVideo')
			this.shareContent = {
				title: res.data.title, // 分享标题
				shareObjectDesc: '醒目购，够醒目，醒目就购啦！', // 分享描述
				thumbUrl: res.data.image // 分享图标
			}
		})
	},
	onReady() { },
	methods: {
		closeFx(e) {
			this.showFenXiang = e
		},
		shareBtn(e) {
			this.toolType = false
			// #ifdef H5
			if (this.isNativeApp()) {
				var urlnews = location.href.indexOf('?') == -1 ? '?' : '&'
				this.$Sdk.share(this.shareContent.title, location.href + urlnews + 'source_member=' + this
					.userInfo.member_id, this.shareContent.thumbUrl)
			} else {
				this.showFenXiang = !this.showFenXiang
				console.log('H5分享', this.showFenXiang)
			}
			// #endif
			// #ifdef MP-WEIXIN
			this.showFenXiang = !this.showFenXiang
			console.log('小程序分享', this.showFenXiang)
			// #endif
		},
		// shareBtn() {
		// 	this.$Utils.tip('点击右上角...分享给好友吧');
		// },
		closeBtn() {
			this.$util.compatiBleJump({
				key: 'exit'
			}, 1)
		},
		ceshi() {
			this.$util.tip('回看不开放该功能，请前往醒目购app体验，(#^.^#)')
		},
		// 商品点击
		goodsBtn() {
			this.goodsType = true
		},
		// 商品跳转
		jumpGoods(val) {
			this.$Router.push({
				path: '/shopPages/goods/detail',
				query: {
					goods_id: val.sku_id,
					is_id: val.sku_id,
					type: 1
				}
			})
		},
		// 判断是否关注用户
		subscribeBtn() {
			if (!this.$util.isLoginCall()) return false
			console.log(this.wx_options, 'wx_optionswx_optionswx_options')
			if (this.wx_options.follow) {
				uni.showModal({
					title: '温馨提示',
					content: '确定真的不关注主播了吗？ ┭┮﹏┭┮',
					success: res => {
						if (res.confirm) {
							this.$request
								.deleteMemberFollow({
									followers_id: this.wx_options.member_id
								})
								.then(res => {
                                    	console.log(this.wx_options, '香菇蓝瘦，┭┮﹏┭┮')
									this.wx_options.follow = false
									this.$util.tip('香菇蓝瘦，┭┮﹏┭┮')
								})
						}
					}
				})
			} else {
				this.$request
					.addMemberFollow({
						followers_id: this.wx_options.member_id
					})
					.then(res => {
						console.log(this.wx_options)
						this.wx_options.follow = true
						this.$util.tip('好嗨森~~~(#^.^#)')
					})
			}
		},
		valConfim(e) {
			let val = e.detail.value || e.target.value || ''
			// console.log('log', val);
		},
		// 礼物icon点击
		giftBtn() {
			if (!this.$util.isLoginCall()) return false
			this.giftType = true
		},
		// 工具栏点击
		toolBtn() {
			this.toolType = true
		},
		giftCancel() {
			this.giftType = false
		}
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target)
		}
		var url = '/livePages/live/replay?live_id=' + this.wx_options.id + '&source_member=' + this.userInfo.member_id
		return {
			title: this.wx_options.title,
			path: url,
			imageUrl: this.wx_options.image
		}
	},
	onShareTimeline(res) {
		var url = '/livePages/live/replay?live_id=' + this.wx_options.id + '&source_member=' + this.userInfo.member_id
		return {
			title: this.wx_options.title,
			path: url,
			imageUrl: this.wx_options.image
		}
	}

}
</script>

<style lang="scss">
/deep/.vjs-big-play-button {
    left: 50% !important;
    top: 50% !important;
    margin-left: -2em;
    margin-top: -1.3em;
}

/deep/.cu-modal {
    background-color: transparent !important;
}

.replay-video {
    width: 100%;
    height: 100%;
}

.mr-10 {
    margin-right: 10rpx;
}

.live-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
}

.live-home {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    .video-js {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -1;
    }

    .live-top {
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 9;

        .live-top-content {
            padding: 50rpx 20rpx 0;
            width: 100%;
        }

        .live-num {
            padding: 20rpx;
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 30rpx;
        }

        .close-icon {
            font-size: 38rpx;
            width: 60rpx;
            height: 60rpx;
            color: #ffffff;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
        }

        .anchor-info {
            padding: 0 10rpx 0 0;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 60rpx;
        }

        .anchor-user {
            padding: 4rpx 10rpx;
            font-size: 18rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
        }

        .anchor-user-name {
            font-size: 22rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
        }
    }

    .live-bottom-box {
        position: absolute;
        bottom: 60rpx;
        font-size: 50rpx;
        color: red;
        left: 20rpx;
        z-index: 66;
    }

    .live-icon-item {
        margin-left: 16rpx;
        width: 72rpx;
        height: 72rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .live-goods {
        position: relative;
        width: 100rpx;
        height: 100rpx;

        image {
            width: 100%;
            height: 100%;
        }

        .live-goods-num {
            position: absolute;
            left: 50%;
            bottom: 16rpx;
            transform: translateX(-50%);
            font-size: 30rpx;
            color: #ffffff;
        }
    }

    .live-bottom-val {
        margin-left: 16rpx;
        width: 324rpx;
        padding: 14rpx 30rpx;
        background: rgba(255, 255, 255, 0.3);
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        border-radius: 80rpx;
    }

    .live-error {
        background-color: #cccccc;
        color: #ffffff;
        z-index: 9999;
    }

    .live-goods-box {
        padding: 0 30rpx;

        .live-goods-header {
            margin: 20rpx 0;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
            opacity: 0.55;
        }

        .goods-scrool {
            max-height: 800rpx;
        }

        .goods-row-image {
            width: 180rpx;
            height: 180rpx;
            border-radius: 20rpx;

            image {
                border-radius: 20rpx;
            }
        }

        .goods-index {
            top: 0;
            left: 0;
            width: 40rpx;
            height: 40rpx;
            border-top-left-radius: 20rpx;
            border-bottom-right-radius: 20rpx;
            z-index: 2;
        }

        .goods-row-info {
            margin-left: 20rpx;
            width: 480rpx;
            justify-content: space-between;
        }

        .goods-row-title {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
        }

        .goods-row-marketprice {
            font-size: 22rpx;
            font-family: PingFangSC;
            font-weight: 400;
            text-decoration: line-through;
            color: #919191;
        }

        .goods-row-price {
            font-size: 28rpx;
            font-family: PingFangSC;
            font-weight: 400;
            color: #ff3e35;
        }
    }
}

.tool-content {
    padding: 0 50rpx;

    .tool-content-item {
        margin-right: 80rpx;
    }

    .tool-content-icon {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 10rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .tool-content-text {
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
    }

    .toolbar-share {
        padding: 0;
        line-height: 1;
        background-color: transparent;
        margin: 0 60rpx 0 0;
    }
}
</style>
